<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AutoPlayer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>🎬 AutoPlayer</h1>
    </header>

    <main>
      <div class="form-group">
        <label for="video-selector">视频元素定位</label>
        <input type="text" id="video-selector" placeholder="如: #myVideo | video">
        <small>留空默认取 document.querySelector('video')</small>
      </div>

      <div class="form-group">
        <label for="button-selector">下一集按钮定位 *</label>
        <input type="text" id="button-selector" placeholder="如: .next-btn | 下一集" required>
        <small>支持任意合法 CSS 选择器</small>
      </div>

      <div class="form-group">
        <label for="interval-sec">检测间隔 (秒)</label>
        <input type="number" id="interval-sec" value="120" min="10" max="3600">
      </div>

      <div class="status-group">
        <label>运行状态</label>
        <div id="status-indicator" class="status-idle">● 待机</div>
        <div id="countdown-label"></div>
      </div>

      <div class="button-group">
        <button id="start-btn">启动</button>
        <button id="stop-btn">停止</button>
        <button id="reset-btn">重置</button>
      </div>
    </main>

    <footer>
      <details>
        <summary>高级 ▼</summary>
        <div class="advanced-info">
          <p>最大重试次数：3 (固定)</p>
          <p>上次点击成功：<span id="last-click-time">N/A</span></p>
          <p><a href="#" id="logs-link">查看日志</a></p>
          <p><a href="https://github.com/your-repo/issues/new" target="_blank">问题反馈</a></p>
        </div>
      </details>
    </footer>
  </div>
  <script type="module" src="main.ts"></script>
</body>
</html>